<template>
  <div>
    <!-- 按钮 -->
    <div class="topBtn">
      <div class="sizeBig"><span>线体</span></div>
      <div style="float: right;margin-right:20px">
        <el-button type="primary" @click="forbidden" style="height:36px;">
          <i class="icon-jiny"></i>禁用
        </el-button>
        <el-button type="primary" @click="Enable" style="height:36px;width:90px;">
          <i class="icon-qiy"></i>启用
        </el-button>
        <el-button type="primary" @click="add">
          <i class="iconfont icon-addNew"></i> 新增
        </el-button>
        <el-button type="primary" @click="edit()" icon="el-icon-edit">修改</el-button>
        <el-button type="primary" @click="remove" icon="el-icon-delete">删除</el-button>
      </div>
    </div>
    
    <div class="message">
      <p class="character">
        设置车间生产线体及线体上需要绑定的设备。
        <span class="skip">查看帮助文档</span>
      </p>
    </div>

    <!-- 搜索 -->
    <div class="inputcontent">
      <el-input v-model="search" placeholder="请输入内容" class="inSearch" @keydown.native.enter="init"></el-input>
      <div class="iconSearch"></div>
    </div>

    <!-- 表格 -->
    <div class="tablesize">
      <Table :reset='reset' v-on:getId="getListId" id="out-table" v-on:changeData="changedata"></Table>
    </div>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,20,50,100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="TotalNum">
      </el-pagination>
    </div>

    <!-- 新增弹出框 -->
    <el-dialog 
      title="新增数据" 
      :visible.sync="addDialogVisible" 
      width="600px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="formName"
        label-width="140px"
        class="demo-ruleForm"
      >
        <el-form-item label="线体名称：" prop="name">
          <el-input v-model="ruleForm.name" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="线体编码：" prop="code">
          <el-input v-model="ruleForm.code" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="描述：" prop="description">
          <el-input v-model="ruleForm.description" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="车间ID：" prop="workShopID">
          <!-- <el-input v-model="ruleForm.workShopID" style="width:350px"></el-input> -->
          <el-select v-model="ruleForm.workShopID" placeholder="请选择车间ID" style="width:350px">
            <el-option 
            v-for="(item,index) in workshopList"
            :key="index"
            :label="item.WorkShopID +'  '+ item.WorkShopName " 
            :value="item.WorkShopID"
            ></el-option>
          </el-select>               
        </el-form-item> 
        <el-form-item>
          <el-button @click="addDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="submitForm('formName')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改弹出框 -->
    <el-dialog 
      title="修改数据" 
      :visible.sync="editDialogVisible" 
      width="600px">
      <el-form
        :model="editInfo"
        :rules="rules"
        ref="editForm"
        label-width="140px"
        class="demo-ruleForm"
      >
        <el-form-item label="线体ID：" prop="lineID" v-show="false">
          <el-input v-model="editInfo.lineID" style="width:350px" disabled></el-input>
        </el-form-item>
        <el-form-item label="线体名称：" prop="name">
          <el-input v-model="editInfo.name" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="线体编码：" prop="code">
          <el-input v-model="editInfo.code" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="描述：" prop="description">
          <el-input v-model="editInfo.description" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="车间ID：" prop="workShopID">
          <!-- <el-input v-model="editInfo.workShopID" style="width:350px"></el-input> -->
          <el-select v-model="editInfo.workShopID" placeholder="请选择车间ID" style="width:350px">
            <el-option 
            v-for="(item,index) in workshopList"
            :key="index"
            :label="item.WorkShopID +'  '+ item.WorkShopName " 
            :value="item.WorkShopID"
            ></el-option>
          </el-select>           
        </el-form-item>
        <el-form-item>
          <el-button @click="editDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="editSubmitForm('editForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getLineList, insertLine,updateLine,removeLine,startOrStopLine } from "@/api/linebody";
import { getWorkshop} from "@/api/workshop"
import Table from "./components/lineBodyTable";
import {delay} from '@/utils/autoSearch'

export default {
  name: "LineBody",
  components: {
    Table
  },
  data() {
    return {
      search: "", //搜索
      input:'',
      reset:[],//初始化数据
      workshopList:[],

      checkIds:[],//勾选的ID数组
      addlist:[],//勾选传过来的数据

      currentPage:1,//页码
      size:10,
      TotalNum:0,//数据总条数

      addDialogVisible: false, //新增弹出框
      editDialogVisible: false, //修改弹出框

      ruleForm: {   
        name: "", 
        code: "", 
        description: "", 
        workShopID: "" 
      },
      editInfo: {
        lineID: "",
        name: "", 
        code: "", 
        description: "", 
        workShopID: "" 
      },
      rules: {
        name: [
          { required: true, message: "请输入线体名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        code: [
          { required: true, message: "请输入线体编码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        workShopID: [
          { required: true, message: "请输入车间ID", trigger: "blur" },
         
        ]
      }
    }
  },
  watch:{
    search(){
      delay(()=>{
        this.fetchData();
      },300);
    }
  },
  mounted(){
    this.init()
  },

  methods: {
    //自动搜索的方法
    async fetchData(val){
      this.init({keyName:this.search})
    },
    handleSizeChange(size){
      this.size = size
      getLineList({ keyName:this.search,page:1,pageSize:this.size}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.reset = res.Result.Items;
        }
      })
    },
    handleCurrentChange(currentPage){
      this.currentPage = currentPage
      getLineList({ keyName:this.search,page:this.currentPage,pageSize:this.size}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.reset = res.Result.Items;
        }
      })
    },
    //请求数据
    init(){
      this.reset = [];
      let param = {keyName:this.search,page:1,pageSize:10}    
      getLineList(param).then((res)=>{
        if(parseInt(res.Code)===1){
             this.reset = res.Result.Items;
             this.TotalNum = res.Result.TotalNum
        }
      })
      getWorkshop({keyName:this.search,page:1,pageSize:1000}).then((res)=>{
        if(parseInt(res.Code)===1){
             this.workshopList = res.Result.Items;
        }
      })
    },
    changedata(data) {
      this.addlist = data;
    },
    getListId(listId) {
      this.checkIds = listId;
    },
    // 新增
    add() {
      this.ruleForm = {};
      this.addDialogVisible = true;
      
    },
    submitForm(formName) {
       this.$refs[formName].validate((valid) => {
        if (valid) {
          insertLine(this.ruleForm).then(res=>{
          if (res.Code === 1) {         
              this.$message({
                type: 'success',
                message: '新增成功!'
              })      
              this.init();
              this.ruleForm = {}
              this.addDialogVisible = false;
            }
          })  
        } else {
          console.log('error submit!!');
          return false;
        }
      });          
    },
    //禁用
    forbidden(){
      if(this.checkIds.length>0){
        if(this.addlist[0].IsEnable === 0){
          this.$message('已禁用')
        }else{
          let data = { lineID:this.checkIds[0],isEnable:0}
          startOrStopLine(data).then(res=>{
            if (parseInt(res.Code) === 1) {
              this.$message({
                type: 'success',
                message: '禁用成功!'
              })
              this.init()
            }
          }) 
        }     
      }else{
        this.$message('请勾选需要禁用的线体数据')
      }
    },
    // 启用
    Enable() {
      if(this.addlist.length>0){
        if(this.addlist[0].IsEnable === 1){
          this.$message('已启用')
        }else{
          let data = { lineID:this.checkIds[0],isEnable:1}
          startOrStopLine(data).then(res=>{
            if (parseInt(res.Code) === 1) {
              this.$message({
                type: 'success',
                message: '启用成功!'
              })
              this.init()
            }
          })  
        }     
      }else{
        this.$message('请勾选需要启用的线体数据')
      }
    },

    //修改
    edit(index,row) {
      if (this.addlist.length !== 1) {
        this.$message("请勾选一项");
      }else {
        this.editDialogVisible = true;
        
        this.editInfo.lineID=this.addlist[0].LineId 
        this.editInfo.name=this.addlist[0].Name 
        this.editInfo.code=this.addlist[0].Code
        this.editInfo.description=this.addlist[0].Description
        this.editInfo.workShopID=this.addlist[0].WorkShopID
      }
    },
    editSubmitForm(editForm) {
      this.$refs[editForm].validate((valid) => {
        if (valid) {        
          updateLine(this.editInfo).then(res=>{
            if (res.Code === 1) {         
              this.$message({
                type: 'success',
                message: '修改线体成功'
              })
              this.editDialogVisible = false;
              this.init();
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //删除
    remove(){
      if(this.addlist.length>0){
        this.$confirm('此操作将永久删除选中的线体数据,是否继续?','提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          let data = {lineID:this.checkIds[0]}
          removeLine(data).then(res=>{
            if(parseInt(res.Code) === 1){
              this.$message({
                type: 'success',
                message: '删除成功!' 
              }) 
              this.init()   
            } 
          })            
        }).catch(()=>{
          this.$message({
            type: 'info',
            message: '已取消删除'
          });      
        })
      }else{
        this.$message('请勾选需要删除的线体数据')
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.sizeBig{
  font-size: 16px;
  margin-left: 20px;
}
.topBtn{
  height: 60px;
  width: 98%;
  margin: 0 auto;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  .icon-jiny{
    display: inline-block;
    width: 12px;
    height:12px;
    margin:0 3px 2px 0;
    background: url("image/jinyong.png") no-repeat;
    vertical-align: middle;
  }
  .icon-qiy{
    display: inline-block;
    width: 13px;
    height:13px;
    margin:0 3px 2px 0;
    background: url("image/qiyong.png") no-repeat;
    vertical-align: middle;
  }
}
.message {
  width: 98%;
  margin: 0 auto;
  height: 60px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(238, 238, 238, 1);
  font-size: 14px;
  .character {
    margin: 20px 0 21px 20px;
    color: #999999;
    .skip {
      color: #0095ff;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
.inputcontent {
  width: 98%;
  margin: 0 auto;
  height: 80px;
  position: relative;
  padding-top: 21px;
  box-sizing: border-box;
  .iconSearch {
    position: absolute;
    left: 277px;
    top: 30px;
    width: 20px;
    height: 20px;
    background-image: url("image/搜索.png");
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .inSearch {
    width: 308px;
    height: 40px;
  }
}
.tablesize {
  width: 98%;
  // height: 485px;
  margin: 0 auto;
   // border: 1px solid #eeeeee;
  #out-table{
    border: 1px solid #eeeeee;
  }
}
.block {
  text-align: right;
  margin: 40px 20px 0 0;
}
</style>

